<template>
  <div class="play-box" :class="{'play-box-h5': piniaSystem.getIsH5}">
    <iframe :src="src" frameborder="0"></iframe>
    <div class="play-box-card" v-if="!piniaSystem.getIsH5">
      <img class="play-box-img1" :src="channel.logoSmall" alt="">
      <img class="play-box-img2" :src="imgPlay" alt="">
      <h3>{{ gameName }}</h3>
      <ul class="play-box-tools">
        <li :class="{'play-box-collected': isCollected}" @click="collectGame">
          <i-mdi-cards-heart v-if="isCollected"/>
          <i-mdi-cards-heart-outline v-if="!isCollected"/>
          <span>{{ t("home.collect") }}</span>
        </li>
        <li class="play-box-share">
          <i-ic-sharp-share  @click="onshare"/>
          <span>{{ t("PROMOTION.Share") }}</span>
        </li>
      </ul>
    </div>
    <CurrencyExchange
      v-model:playId="playId"
      v-model:visible="showCurrencyExchange"
      @queryThirdUrl="queryThirdUrl(true)"
      v-if="showCurrencyExchange"
    />
  </div>
</template>

<script setup lang="ts">
import userinfo from '@/store/userinfo';
import system from '@/store/system';
import gamesApi from '@/api/modules/games';
import nocache from '@/store/nocache';
import gamesList from '@/store/games';
import { showNotify, closeNotify } from 'vant';

const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const piniaNocache:any = nocache();
const piniaGamesList:any = gamesList();
const channel = computed(()=> piniaSystem.getChannel);
const isCollected:any = computed(()=>piniaGamesList.getCollect.some((item:any)=>item.playId === route.query.playId)); // 當前游戲是否被收藏

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

const data:any = reactive({
  src: "",
  playId: computed(() => route.query.playId),
  imgPlay: computed(() => route.query.imgPlay),
  gameName: computed(() => route.query.gameName),
  showCurrencyExchange: false,
});

const {
  src,
  playId,
  imgPlay,
  gameName,
  showCurrencyExchange,
} = toRefs(data);

// playid切换
watch(
  () => playId.value,
  (val, preVal) => {
    if(val){
      queryThirdUrl();
    }
  },
  { immediate: false, deep: true },
);

// 获取第三方游戏地址
const queryThirdUrl = (ifRate?: boolean) => {
  piniaNocache.setLoading(true);
  console.log('当前钱包', ifRate)
  gamesApi.thirdUrl({
    playId: playId.value,
    currencyId: piniaUserinfo.getCurrentWallet.targetCurrencyId || piniaUserinfo.getCurrentWallet.currencyId,
    language: piniaSystem.getLang.locale,
    lobbyUrl: `https://${window.location.host}`,
    mode: 0,
    ifRate: ifRate ? 1 : 0,
    deviceType: 1,
  }).then((response:any)=>{
    if(response.code === 200){
      if(response.data == "code_1131"){
        console.log('货币不足===========>>>>>>>>>>>>', response)
        gamesApi.getGameRateList({
          playId: playId.value,
          currencyId: piniaUserinfo.getCurrentWallet.currencyId,
        }).then((response: any) => {
          console.log("货币不足, 查询可兑换货币", response)
          if(response.code === 200 && response.data.list && response.data.list.length > 0){
            // 默认货币不足
            showCurrencyExchange.value = true;
          }
        });
      }else{
        src.value = response.msg;
      }
    }else{
      router.replace({
        path: "/home"
      });
    }
  }).finally(()=>{
    piniaNocache.setLoading(false);
  });
}
queryThirdUrl();

// 收藏游戲
const collectGame = () => {
  gamesApi.addUserGameCollect({ playId: playId.value }).then((response:any) => {
    if (response.code == 200) {
      piniaGamesList.setCollect();
      showNotify({ type: 'success', message: t("UserInfo.successin") });
    }
  });
}

// 分享
const onshare = () => {
  showNotify({ type: 'warning', message: t("UserInfo.SorryMes") });
}

onBeforeMount(()=>{
  // 更改menu的类型
  piniaNocache.setMenuType('playbox');
});

onBeforeUnmount(()=>{
  // 更改menu的类型
  piniaNocache.setMenuType('normal');
});

onMounted(()=>{
  piniaNocache.setHideFooterBar(true);
});

onUnmounted(()=>{
  piniaNocache.setHideFooterBar(false);
});
</script>

<style lang="scss" scoped>
@import url(./index.scss);
</style>
